$(document).keypress(function(e) {
	var text  = "incorrect key";
	
	var coco = 	$("#loadingIcon-wrapper");

	var px = coco.position().left,
		py = coco.position().top;

	switch(e.keyCode) 
	{
		case 97: 
			px -= 15;
			text = "left";
			coco.animate(
				{left: '-=15'},
				0
			);
			coco.css({
			     '-moz-transform':'rotate(-180deg)',
			     '-webkit-transform':'rotate(-180deg)',
			     '-o-transform':'rotate(-180deg)',
			     '-ms-transform':'rotate(-180deg)'
			});
		break;
		
		case 119: 
			text = "up";
			py -= 15;
			coco.animate(
				{top: py},
				0
			);
			coco.css({
			     '-moz-transform':'rotate(-90deg)',
			     '-webkit-transform':'rotate(-90deg)',
			     '-o-transform':'rotate(-90deg)',
			     '-ms-transform':'rotate(-90deg)'
			});
		break;
		
		case 100: 
			text = "right";
			px += 15;
			coco.animate(
				{left: '+=15'},
				0
			);
			coco.css({
			     '-moz-transform':'rotate(0deg)',
			     '-webkit-transform':'rotate(0deg)',
			     '-o-transform':'rotate(0deg)',
			     '-ms-transform':'rotate(0deg)'
			});
		break;
		
		case 115: 
			text = "down";
			py += 15;
			coco.animate(
				{top: py},
				0
			);
			coco.css({
			     '-moz-transform':'rotate(90deg)',
			     '-webkit-transform':'rotate(90deg)',
			     '-o-transform':'rotate(90deg)',
			     '-ms-transform':'rotate(90deg)'
			});
		break;
	}
});

function showLoading() {
	$("#main").append("<div id='loadingDiv'></div>");
	$("#loadingDiv");
	
	$("#loadingDiv").append("<div id=loadingIcon-wrapper></div>");
	$("#loadingDiv").append("<div id=loading-title> LOADING... <p> Use 'W', 'A', 'D', 'S' keys to move <span style='text-decoration:underline'> coco </span> </p> </div>");
}

function createMenu(data) {
	$("#main").append("<div id='menu-wrapper'><ul id='menu-list'> </ul></div>");
	
	$.each(data, function(i, item) {
		$("#menu-list").append($('<li>', {
			text: item.name
		}));
	});
}

function projectItem(name) {
	var $div = $('<div></div>')
	$div.addClass("project-item");
	
}

$(document).ready(function(){
	$.getJSON('json/projects.json', function(data){
		setInterval(function() {
			$("#loadingDiv").hide("slow", function() {
				$("#loadingDiv").remove();
				createMenu(data);
			});
		}, 2000);
	});
	showLoading();
});
